<template>
	<view class="login">
		<image class="bg-img" src="http://124.223.215.40:8888/app-img/user1.jpg"></image>
		<view class="content-wrapper">
			<view class="title">
				<h1>欢迎使用上课考勤系统</h1>
			</view>
			<view class="login-form">
				<form>
				<view class="login-form-items">
					<view class="login-form-items-title">账户:</view>
					<input type="text" class="login-input" placeholder="请输入学号" name="username" v-model="form.username"/>
				</view>

				<view class="login-form-items">
					<view class="login-form-items-title">密码:</view>
					<input type="password" class="login-input" placeholder="请输入登录密码" name="password" v-model="form.password"/>
				</view>

				<view class="login-form-items">
					<view class="login-form-items-title">验证码:</view>
					<input type="text" class="login-input" placeholder="请输入验证码" name="code" v-model="form.code"/>
					<view class="captcha-wrapper">
						<img :src="img" @click="captchaImage"  style="width: 90px;height: 30px;float: right;"></img>
					</view>
				</view>
				</form>
			</view>
		</view>
		<div class="submit-wrapper">
			<button type="primary" class="login-btn" @click="login()" :disabled="logining">登录</button>
			<view style="text-align: center;margin-top: 10px;color: #007AFF;">
				<span @click="register()">注册账号</span><span style="color: #333333;"> | </span><span @click='repassword()'>忘记密码</span>
			</view>
		</div>
	</view>
</template>

<script>
	import {captchaImage,loginApp} from '@/api/user.js'
	import graceChecker from "@/common/rulesChecker.js"
	export default {
		name:'login',
		data() {
			return {
				img:'',
				form:{
					username:'',
					password:'',
					code:'',
					uuid:'',
				},
				logining:false

			};
		},
		onLoad() {
			this.captchaImage()
			
		},
		created(){
			//this.captchaImage()
		},
		methods:{
			captchaImage(){
				captchaImage().then(res=>{
					if(res){
						this.img='data:image/jpeg;base64,'+res.img
						this.form.uuid=res.uuid
					}
				})
				//this.img='http://localhost:8088/captchaImageApp?'+new Date()
				
			},
			register(){
				let url = '/pages/logincommon/register/register';
				uni.navigateTo({
					url
				});
			},
			repassword(){
				let url = '/pages/logincommon/repassword/repassword';
				uni.navigateTo({
					url
				});
			},
			login(){
				let that=this;
				var rule = [
					{name:"username", checkType : "sz", checkRule:"",  errorMsg:"账号不能为空",ruleMsg:"账号格式错误"},
					{name:"password", checkType : "sz-zm", checkRule:"",  errorMsg:"密码不能为空",ruleMsg:"密码格式错误"},
				];
				//进行表单检查
				var formData = this.form;
				console.log(formData)
				var checkRes = graceChecker.check(formData, rule);
				if(checkRes){
					this.$store.dispatch('Login',this.form).then(res => {
						this.logining = false;
						uni.showToast({ title: "登录成功", icon: "none" });
						 this.$store.dispatch('GetInfo').then(() => {})
						// 跳转首页
						uni.switchTab({
							url: '/pages/index/index'
						});
						
					}).catch(() => {
						this.captchaImage()
						this.logining = false;
					})
				}else{
					console.log(graceChecker)
				    uni.showToast({ title: graceChecker.error, icon: "none" });
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #F4F5F6;
	}
	.login {
		.content-wrapper {
			width: 100%;

			.title {
				margin-top: 35rpx;
				width: 100%;
				margin-bottom: 10px;

				h1 {
					border: 0px;
					width: 50%;
					margin: 0 auto;
					text-align: center;
					border-bottom: 1px solid #E3E3E3;
					height: 50px;
					line-height: 50px;
					font-size: 17px;
					overflow: hidden;
					font-weight: 400;
				}
			}

			.login-form {
				margin: 20px 10px 20px 15px;
				//background: #FFFFFF;

				.login-form-items {
					padding: 15px 10px;
					border-bottom: 1px solid #F3F4F5;
					position: relative;
					display: -webkit-flex;
					display: flex;

					.login-form-items-title {
						width: 30%;
						line-height: 22px;
						height: 22px;
						flex-shrink: 0;
					}

					.login-input {
						width: 100%
					}

					img {
						width: auto;
						height: auto;
						max-width: 100%;
						max-height: 100%;
					}
				}
			}
		}

		.submit-wrapper {
			padding: 10px;
			padding-top: 10px;
		}

	}
</style>
